.kd-drawer {
    height: 100%;
    // min-width: 200px;
    justify-content: center;
    align-content: center;
    // border: 1px #555 solid;
    padding: 0px 15px 15px 15px;
    background-color: white;
    color: #4e4e4e;

    display: flex;
    flex-direction: column;

    position: absolute;
    right: -600px;
    top: 0;

    transition: right .3s;


    &.kd-drawer-open {
        right: 0;
        transition: right .3s;
    }


    animation: all 1s;
    -webkit-animation: all 1s;
    z-index: 100;


    .kd-drawer-header {
        display: flex;
        height: 40px;
        justify-content: flex-end;
        align-items: center;
        // background-color: lightsalmon;

        flex-direction: row;

        border-bottom: 1px solid #ececec;
        // padding-top: 2px;

        &>div {
            display: flex;
            align-items: center;
        }

        &>div.left {
            justify-content: flex-start;
            flex: 1;
        }

        &>div.right {
            justify-content: flex-end;
            margin-right: -6px;

            .right_close_icon {
                width: 30px;
                height: 30px;
                background-color: lightcoral;
                // background: url(./img/X.png) no-repeat;
                background-position: 50% 50%;
                background-size: 50% 50%;
            }
        }

    }

    .kd-drawer-body {
        display: flex;
        // height: 100px;
        // justify-content: center;
        // align-items: center;
        // background-color: lightslategrey;
        flex-direction: column;
        flex: 1;
        padding: 10px 0px;
        // overflow: auto;
        height: calc(100% - 94px);
        overflow: hidden;
    }

    .kd-drawer-footer {
        display: flex;
        height: 40px;
        justify-content: center;
        align-items: center;
        // background-color: lightsteelblue;
        // border-top: 1px solid #ececec;

        &>div {
            margin: 0px 4px;
        }

    }


}

.kd-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .3;
    z-index: 99;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        /*初始状态 透明度为0*/
    }

    50% {
        opacity: 0.5;
        /*中间状态 透明度为1*/
    }

    100% {
        opacity: 1;
        /*结尾状态 透明度为0*/
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        /*初始状态 透明度为0*/
    }

    50% {
        opacity: 0.5;
        /*中间状态 透明度为1*/
    }

    100% {
        opacity: 0;
        /*结尾状态 透明度为0*/
    }
}

@keyframes maskfadeIn {
    0% {
        opacity: 0;
        /*初始状态 透明度为0*/
    }

    33% {
        opacity: 0.1;
        /*中间状态 透明度为1*/
    }

    66% {
        opacity: 0.2;
        /*中间状态 透明度为1*/
    }

    100% {
        opacity: 0.3;
        /*结尾状态 透明度为0*/
    }
}

@keyframes maskfadeOut {
    0% {
        opacity: 0.3;
        /*初始状态 透明度为0*/
    }

    33% {
        opacity: 0.2;
        /*中间状态 透明度为1*/
    }

    66% {
        opacity: 0.1;
        /*中间状态 透明度为1*/
    }

    100% {
        opacity: 0;
        /*结尾状态 透明度为0*/
    }
}

.fadeIn {
    animation: fadeIn .5s linear;
}

.fadeOut {
    animation: fadeOut .5s linear;
}

.maskFadeIn {
    animation: maskfadeIn .3s linear;
}

.maskFadeOut {
    animation: maskfadeOut .3s linear;
}